import React from "react";
import { Component } from "react";
import { getSchoolSecurityRankApi, getCountySecurityRankApi } from "../../js/bigscreen/api";
import { withRouter } from "react-router";
import { Carousel } from "antd-mobile"
import '../../css/bigscreen/securityworkrank.css'
import JSEncrypt from "jsencrypt";



class SecurityWorkRank extends Component {

    constructor(props) {
        super(props);
        this.state = {
            securityRank: [],
            main: 1 // 主大屏
        }
    }

    componentDidMount() {
        let educationId = parseInt(sessionStorage.getItem("departmentId"))
        if (this.props.match.params.county != undefined) {
            this.setState({
                main: 0
            })
            this.getSchoolSecurityRank(this.props.schooltype);
        } else {
            this.getCountySecurityRank(educationId);
        }

    }

    getSchoolSecurityRank = (schooltype) => {
        let educationId = this.props.match.params.county
        getSchoolSecurityRankApi(schooltype, educationId).then((res) => {
            if (res.data) {
                let temp = [];
                res.data.forEach((item) => {
                    if (item.inspectrate != 0 || item.patrolrate != 0) {
                        if (item.inspectrate > 1) item.inspectrate = 1;
                        if (item.patrolrate > 1) item.patrolrate = 1;
                        temp.push(item);
                    }
                })
                this.setState({
                    securityRank: temp
                })
            }
        }).catch((e) => {
            console.log(e);
        })
    }

    getCountySecurityRank = (parent) => {
        getCountySecurityRankApi(parent).then((res) => {
            if (res.data) {
                let temp = [];
                res.data.forEach((item) => {
                    temp.push(item);
                })
                this.setState({
                    securityRank: temp
                })
            }
        }).catch((e) => {
            console.log(e);
        })
    }



    render() {
        let rank = [];
        for(var i = 0;i < this.state.securityRank.length;i++){
            if(i < 6){
                rank.push(
                    <li key={i} className="rankitem">
                        <span className="rankindex">{i + 1}</span>
                        <span className="city">{this.props.match.params.county != undefined  ? this.state.securityRank[i].schoolname : this.state.securityRank[i].educationname}</span>

                            <span className="num comprehensivepoint">{this.state.securityRank[i].comprehensivepoints}</span>
                        
                        {/* <span className="num danger">{item.dangerrate * 100}%</span> */}
                    </li>
                )
            }else{
                break;
            }
        }
        let rank2 = [];
        if(this.state.securityRank.length >= 7){
            for(var j = 0;j < this.state.securityRank.length;j++){
                if(j >= 6){
                    rank2.push(
                        <li key={j} className="rankitem">
                            <span className="rankindex">{j + 1}</span>
                            <span className="city">{this.props.match.params.county != undefined  ? this.state.securityRank[j].schoolname : this.state.securityRank[j].educationname}</span>
    
                                <span className="num comprehensivepoint">{this.state.securityRank[i].comprehensivepoints}</span>
                        
                            {/* <span className="num danger">{item.dangerrate * 100}%</span> */}
                        </li>
                    )
                }
            }
        }
        return (
            <div style={{ marginLeft: this.props.position == 'left' ? '1.25rem' : '.375rem' }} className={"rankbg " + this.props.position1}>
                <div className="rankheader">
                    <svg class="icon" aria-hidden="true">
                        <use xlinkHref="#icon-paimingkaoqian-01"></use>
                    </svg>
                    <span className="rankheadertxt">{this.props.name}</span>
                </div>

                <div className="ranktitle">
                    <span className="rank">排名</span>
                    <span className="city">{this.props.type == "0" ? "学校" : "区县"}</span>
                    {
                        this.state.main == 1 ?
                        <span className="comprehensivepoint">平均综合积分</span>
                        :
                        <span className="comprehensivepoint">综合积分</span>
                    }
                    
                    {/* <span className="danger">隐患处理率</span> */}
                </div>
                {this.state.securityRank.length >= 7 ? 
                    <Carousel style={{width:"5.625rem"}} autoplay infinite autoplayInterval={3000}> 
                        <ul>
                            {rank}
                        </ul>
                        <ul>
                            {rank2}
                        </ul>
                    </Carousel>
                    : 
                    <ul>
                        {rank}
                    </ul>
                }
            </div>

        )
    }
}

export default withRouter(SecurityWorkRank)